<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网站</title>
    <!-- 公共文件 -->
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/blog-single.css">
</head>

<body>

    <!-- ======= Header ======= -->
    <header id="header"></header><!-- End Header -->


    <div class="top">
        <img src="./images/blog-single/jhk-1658719105023@2x.png" alt="">
    </div>
    <main class="container">

        <div class="head">
        </div>

        <section class="middle">

        </section>
        <div class="tail flex">
            <div class="zuo flex">
                <h3 class="biaoqian">标签</h3>
                <span class="no1 aaa">Travel</span>
                <span class="no2 aaa">December</span>
                <span class="no3 aaa">Adventure</span>
                <span class="no4 aaa">Fun</span>
            </div>
            <div class="you flex">
                <h2 class="biaoqian2">分享到</h2>
                <img src="./images/blog-single/7d7d98433526e737c25ed8170254797@2x.png" alt="">
                <img src="./images/blog-single/168b2fed7896cc07a430c0690e9a9e7@2x.png" alt="">
                <img src="./images/blog-single/图层 3@2x.png" alt="">
                <img src="./images/blog-single/图层 4@2x.png" alt="">
            </div>
        </div>

    </main>
    <section class="comment">
        <div class="comment1">
            <img class="inside" src="./images/17f1254d04f8eed99c7c3a155e72384@2x.png" alt="">
            <span class="comment-new">
                <h3 class="comment-new1">Auiern</h3>
                <h3 class="comment-new2">2022-03-27</h3>
            </span>
            <span class="comment-new3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut
                labore et dolore magna aliqua.Quis<br> ipsum suspendisse ultrices gravida. Risus commodo viverra
                maecenas accumsan lacus vel facilisis. </span>
            <div class="comment1-1">
                <img class="inside1" src="./images/4-1Z302144215@2x.png" alt="">
                <span class="comment-new4">
                    <h3>Auiern</h3>
                    <h3>2022-03-27</h3>
                </span>
                <span class="comment-new5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut
                    labore </span>
            </div>
        </div>
        <div class="comment2">
            <img class="inside" src="./images/blog-single/图层 8@2x.png" alt="">
            <span class="comment-new">
                <h3 class="comment-new1">Auiern</h3>
                <h3 class="comment-new2">2022-03-27</h3>
            </span>
            <span class="comment-new3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut
                labore et dolore magna aliqua.Quis<br> ipsum suspendisse ultrices gravida. Risus commodo viverra
                maecenas accumsan lacus vel facilisis. </span>
        </div>
        <div class="comment3">
            <img class="inside" src="./images/31c0042cefee2c328bafb1e0d23e410@2x.png" alt="">
            <span class="comment-new">
                <h3 class="comment-new1">Auiern</h3>
                <h3 class="comment-new2">2022-03-27</h3>
            </span>
            <span class="comment-new3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut
                labore et dolore magna aliqua.Quis<br> ipsum suspendisse ultrices gravida. Risus commodo viverra
                maecenas accumsan lacus vel facilisis. </span>

        </div>
        <div class="look-comment">
            <span>查看所有评论</span>
        </div>

        <div class="comment4">
            <h2>评论</h2>
            <div>
                <input id="nickname" class="input1" type="text" placeholder="称呼">
                <input id="email" class="input2" type="text" placeholder="Email">
            </div>
            <textarea id="content" style="resize:none;outline:none;" cols="155" rows="15" placeholder="请输入留言">
            </textarea>
            <button class="fabu flex" id="btn-post">提交</button>
        </div>
    </section>
    <script src="./js/main.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/blog-single.js"></script>

</body>

</html>